import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import Board from "./board";
import contentList from "./contentList";
import ScrollBoard from "./scrollBoard";
import { Outlet } from "react-router-dom";

// const positions = [0, 236, 475, 667, 752, 752, 752];
const positions = [0, 236, 475, 667, 928, 980, 980];

const MessageBoard = () => {
    const [activeKey, setActiveKey] = useState(0);

    const getClickKey = (clickKey) => {
        setActiveKey(clickKey);
        window.scrollTo(0, positions[clickKey]);
    };

    useEffect(() => {
        window.onscroll = function () {
            let t = document.documentElement.scrollTop;
            // console.log(t);
            if (t < 70) {
                setActiveKey(0);
            } else if (t < 310) {
                setActiveKey(1);
            } else if (t < 545) {
                setActiveKey(2);
            } else if (t < 740) {
                setActiveKey(3);
            } else {
                setActiveKey(4);
            }
        };
    }, []);

    return (
        <div className={styles.message_board}>
            {contentList.map((item) => (
                <Board
                    key={item.key}
                    url={item.key}
                    font={item.font}
                    title={item.title}
                    intro={item.intro}
                />
            ))}
            <ScrollBoard activeKey={activeKey} getClickKey={getClickKey} />
            <Outlet />
        </div>
    );
};

export default MessageBoard;
